<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

 <div class="card">
    <div class="card-header">
        <i class="fa fa-list text-danger mr-1"></i>
        <span i18n>Notification List</span>
        <span class="fa fa-info-circle text-success font-weight-bold ml-1" i18n>&nbsp;The data loaded by default takes the value of status as NEW</span>
    </div>
    <div class="bg-light card-header p-0">
        <div class="px-2 py-2">
            <div class="btn-group btn-group-sm" role="group">
                <button type="button" class="btn btn-danger" (click)="deleteConfirm()" [disabled]="notificationSelected.length === 0">
                    <span>
                        <i class="fa fa-trash mr-1"></i>
                        <span i18n>Delete</span>
                    </span>
                </button>
            </div>
            <a class="text-primary ml-3 text-decoration-none" role="button" (click)="advancedToggle()">
                <span>
                    <span i18n>Advanced</span>
                    <i class="fa fa-angle-double-right ml-1"></i>
                </span> 
            </a>
        </div>
    </div>
    <div [hidden]="!advancedOperation" class="bg-light card-header p-0">
        <div class="px-2 py-2">
            <form>
                <div class="form-group row">
                    <div class="col-md-10">
                        <div class="input-group" style="width: 600px;">
                            <div class="input-group-prepend">
                                <span class="input-group-text" i18n>Status</span>
                            </div>
                            <select class="custom-select" name="statusSelected" [(ngModel)]="statusSelected">
                                <option value="NEW">NEW</option>
                                <option value="PROCESSED">PROCESSED</option>
                                <option value="ESCALATED">ESCALATED</option>
                            </select>
                            <div class="input-group-append" role="button" (click)="searchByStatus()">
                                <span class="input-group-text"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="form-group row">
                    <div class="col-md-10">
                        <div class="input-group" style="width: 600px;">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Category</span>
                            </div>
                            <select class="custom-select" name="categorySelected" [(ngModel)]="categorySelected">
                                <option value="SECURITY">SECURITY</option>
                                <option value="HW_HEALTH">HW_HEALTH</option>
                                <option value="SW_HEALTH">SW_HEALTH</option>
                            </select>
                            <div class="input-group-append" role="button" (click)="searchByCategory()">
                                <span class="input-group-text"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div> -->
                <div class="form-group row">
                    <div class="col-md-10">
                        <div class="input-group" style="width: 600px;">
                            <div class="input-group-prepend">
                                <span class="input-group-text" i18n>Start</span>
                            </div>
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" class="form-control" name="startSelected">
                            
                            <div class="input-group-prepend">
                                <span class="input-group-text" i18n>End</span>
                            </div>
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" class="form-control" name="endSelected">

                            <div class="input-group-append">
                                <button class="btn btn-secondary" type="button" [disabled]="!startSelected || !endSelected" (click)="searchByStartEnd()"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-10">
                        <div class="input-group" style="width: 600px;">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <span i18n>CleanupByAge</span>&nbsp;
                                    <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
                                    data-content="Deletes notifications which have age and is less than the specified one, where the age of Notification is calculated by subtracting its last modification timestamp from the current timestamp. Note that the corresponding transmissions will also be deleted.">
                                </span>
                                </span>
                            </div>
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" class="form-control" name="ageCleanupAll">
                            <div class="input-group-append">
                                <button class="btn btn-danger" type="button"  [disabled]="!ageCleanupAll" (click)="deleteConfirm('age')"><i class="fa fa-trash-o"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-10">
                        <div class="input-group" style="width: 600px;">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <span i18n>Cleanup</span>&nbsp;
                                    <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
                                        data-content="Deletes the processed notifications if the current timestamp minus their last modification timestamp is less than the age parameter, and the corresponding transmissions will also be deleted. Please notice that this API is only for processed notifications (status = PROCESSED). If the deletion purpose includes each kind of notifications, please refer to cleanupAll.">
                                    </span>
                                </span>
                            </div>
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" class="form-control" name="ageCleanupByStatusIsProcessed">
                            <div class="input-group-append">
                                <button class="btn btn-danger font-weight-bold" type="button"  [disabled]="!ageCleanupByStatusIsProcessed" (click)="deleteConfirm('status')"><i class="fa fa-trash-o"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card-body p-0 position-relative">
        <div class="table-responsive">
            <table class="table table-hover text-truncate ">
                <thead class="thead-light">
                    <tr>
                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll()" (click)="selectAll($event)"></th>
                      <th scope="col">ID</th>
                      <th scope="col" i18n>Category</th>
                      <th scope="col" i18n>Labels</th>
                      <th scope="col" i18n>Content</th>
                      <th scope="col" i18n>ContentType</th>
                      <th scope="col" i18n>Description</th>
                      <th scope="col" i18n>Sender</th>
                      <th scope="col" i18n>Severity</th>
                      <th scope="col" i18n>Status</th>
                      <th scope="col" i18n>Created</th>
                      <th scope="col" i18n>Modified</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let notification of notificationList" [class.table-active]="isChecked(notification.id)">
                        <td> <input type="checkbox" role="button"  [checked]="isChecked(notification.id)" (click)="selectOne($event,notification)"></td>
                        <td class="user-select-all">{{notification.id}}</td>
                        <td class="user-select-all">{{notification.category}}</td>
                        <td>{{notification.labels}}</td>
                        <td>{{notification.content}}</td>
                        <td>{{notification.contentType}}</td>
                        <td>{{notification.description}}</td>
                        <td>{{notification.sender}}</td>
                        <td>{{notification.severity}}</td>
                        <td>{{notification.status}}</td>
                        <td>{{notification.created | date:'yyyy-MM-dd hh:mm:ss'}}</td>
                        <td>{{notification.modified | date:'yyyy-MM-dd hh:mm:ss' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer text-muted p-1">
        <nav aria-label="navigation">
            <ul class="pagination justify-content-end m-0">
                <li class="page-item mr-2 mt-1">
                    <span class="align-middle" i18n>items per page</span>
                </li>
                <li class="page-item mr-2 ">
                    <select class="custom-select" name="pageLimit" id="pageLimit" [(ngModel)]="pageLimit" (ngModelChange)="onPageSelected()">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
                    </select>
                </li>
                <li class="page-item mr-1">
                    <button class="page-link btn" (click)="prePage()" [disabled]="pagination === 1">
                        <i class="fa fa-angle-double-left mr-1"></i> 
                        <span i18n>Previous</span> 
                    </button>
                </li>
                <li class="page-item" >
                    <button class="page-link btn" (click)="nextPage()" [disabled]="this.pageLimit > notificationList.length">
                        <span i18n>Next</span>
                        <i class="fa fa-angle-double-right ml-1"></i>
                    </button>
                </li>
            </ul>
        </nav>
    </div>
 </div>

 <div class="modal fade" id="deleteConfirmDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="deleteConfirmDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteConfirmDialogLabel">
                    <i class="fa fa-warning mr-1"></i>
                    <span i18n>Warning</span>
                </h5>  
            </div>
            <div class="modal-body" i18n>
                The data will be permanently erased!!! Are you sure to execute delete operation？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" i18n>Cancel</button>
                <button type="button" class="btn btn-danger" (click)="cleanup()" i18n>Confirm</button>
            </div>
        </div>
    </div>
</div>